<template>
  <div :class="classNames">
    <div ref="headRef" :class="headerClassName">
      <div :class="`${prefixedClassName}-main-left`" @click="handleMenuHeaderClick">
        <div id="logo" key="logo" :class="`${prefixedClassName}-logo`">
          <slot name="logo">
            <div>
              <router-link :to="{ name: 'index' }">
                <img src="@/assets/logo.png" alt="logo" />
                <h1>Admin Pro</h1>
              </router-link>
            </div>
          </slot>
        </div>
      </div>
      <div :style="{ flex: 1 }" :class="`${prefixedClassName}-menu`">
        <base-menu
          v-if="menus && menus.length > 0"
          mode="horizontal"
          :theme="theme"
          :menus="menus"
          :open-keys="openKeys"
          :selected-keys="selectedKeys"
          @update:open-keys="handleOpenKeys"
          @update:selected-keys="handleSelectedKeys"
        />
      </div>
      <right-content>
        <slot name="rightContent" />
      </right-content>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue';
import { useProProvider } from '../pro-provider/index';
import BaseMenu from '@/components/base-layouts/base-menu/index.vue';
import RightContent from '../top-nav-header/right-content.vue';
import type { RouteProps } from '../typing';
import type { MenuTheme } from 'ant-design-vue';
import type { PropType } from 'vue';
const props = defineProps({
  prefixCls: {
    type: String,
  },
  layout: {
    type: String,
    default: 'side',
  },
  theme: {
    type: String as PropType<MenuTheme>,
    default: 'dark',
  },
  openKeys: {
    type: Array as PropType<string[]>,
    default: (): string[] => [],
  },
  selectedKeys: {
    type: Array as PropType<string[]>,
    default: (): string[] => [],
  },
  contentWidth: {
    type: String as PropType<'Fluid' | 'Fixed'>,
    default: 'Fluid',
  },
  menus: {
    type: Array as PropType<RouteProps[]>,
    default: (): RouteProps[] => [],
  },
});

const emit = defineEmits(['update:openKeys', 'update:selectedKeys']);
defineSlots<{
  default: () => any;
  logo: () => any;
  rightContent: () => any;
}>();

const { theme, contentWidth, prefixCls: customizePrefixCls } = toRefs(props);
const { getPrefixCls } = useProProvider();
const prefixedClassName = computed(
  () => customizePrefixCls.value || getPrefixCls('top-nav-header'),
);

const classNames = computed(() => {
  return {
    [prefixedClassName.value]: true,
    ['light']: theme.value === 'light',
  };
});
const headerClassName = computed(() => {
  return {
    [`${prefixedClassName.value}-main`]: true,
    ['wide']: contentWidth.value === 'Fixed',
  };
});

/** events */
const handleSelectedKeys = (selectedKeys: string[]): void => {
  emit('update:selectedKeys', selectedKeys);
};
const handleOpenKeys = (openKeys: string[]): void => {
  emit('update:openKeys', openKeys);
};
const handleMenuHeaderClick = (): void => {};
</script>

<style lang="less">
#app-body {
  @import url('./index.less');
}
</style>
